<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="stylesheet" href="./css/base.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    
    <div class="wrap">
        <div class="header">
            <div class="head-logo"></div>
        </div>
        <div class="content">
            <div class="main-box">
                <div class="login-form">
                    <p class="login navtab-link" id="tab">
                        <span class="current">账号登录</span>
                        <i class="line">|</i>
                        <span>扫码登录</span>
                    </p>
                    <div class="tab-content">
                        <div class="account-login" >
                            <form action="#">
                                <p class="id-number">
                                    <input type="text" 
                                            maxlength="11"
                                            placeholder="邮箱/手机号码/小米账号"
                                            name="number"
                                    >
                                </p>
                                <p class="password">
                                    <input type="password"
                                            maxlength="32"
                                            minlength="4"
                                            placeholder="密码"
                                            name="password"
                                    >
                                </p>
                                <p class="submit-btn">
                                    <input type="submit" value="立即登录">
                                </p>
                            </form>
                            <p class="register">
                                <span>注册小米账号</span>
                                <span class="register-line">|</span>
                                <span>忘记密码？</span>
                            </p>
                            <div class="login-style">
                                <!-- 画线 -->
                                <p  class="more-style">
                                    <span class="left"></span>
                                    <span>其他方式登录</span>
                                    <span class="right"></span>
                                </p>
                                <div class="all-icon">
                                    <a href="#" class="qq">
                                        <span></span>
                                    </a>
                                    <a href="#" class="wb">
                                        <span></span>
                                    </a>
                                    <a href="#" class="zf">
                                        <span></span>
                                    </a>
                                    <a href="#" class="vx">
                                        <span></span>
                                    </a>
                                </div>
                                
                            </div>
                        </div>
                        <div class="scan-login" >
                            <img src="./images/sao.png" alt="">
                            <div>
                                <p>
                                    使用
                                    <span>小米商城APP</span>
                                    扫一扫
                                </p>
                                <p>小米手机可打开  [设置]  >  [小米账号]  扫码登录</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <ul>
                <li>
                    <a href="#">简体</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">繁体</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">English</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
            </ul>
            <p class="footer-bottom">
                <span>小米公司版权所有-京ICP备10046444-</span>
                <a href="#">
                    <img src="./images/ghs.png" alt="">
                    <span>京公网安备11010802020134号</span>
                </a>
                <span>-京ICP证110507号</span>
            </p>
        </div>
    </div>
    <script>
        var $lis = $("#tab>span");
        for(var i=0;i<$lis.length;i++){
            $lis[i].index=i;
        }
        $lis.click(function(){
            $(this).addClass("current").siblings().removeClass("current");
            $(".tab-content").children().hide().eq(this.index).show();
        });
    </script>
</body>
</html>